<!-- meta tags and other links -->
<!-- Header -->
<!DOCTYPE html>
<html   lang="en"   xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Title -->
    <title> Viserpet HTML Template</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/picture/favicon.png">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- Fontawesome -->
    <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
    <!-- Slick -->
    <link rel="stylesheet" href="assets/css/slick.css">
    <!-- line awesome -->
    <link rel="stylesheet" href="assets/css/line-awesome.min.css">
    <!-- countdown css link-->
    <link rel="stylesheet" href="assets/css/jquery.classycountdown.min.css">
    <!-- range css -->
    <link rel="stylesheet" href="assets/css/jquery-ui.css">
    <!-- magnific css link -->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!-- Main css -->
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
    
<!--==================== Preloader Start ====================-->
<div class="preloader">
    <div class="loader-p"></div>
  </div>
<!--==================== Preloader End ====================-->

<!--==================== Overlay Start ====================-->
<div class="body-overlay"></div>
<!--==================== Overlay End ====================-->

<!--==================== Sidebar Overlay End ====================-->
<div class="sidebar-overlay"></div>
<!--==================== Sidebar Overlay End ====================-->

<!-- ==================== Scroll to Top End Here ==================== -->
<a class="scroll-top"><i class="fas fa-angle-double-up"></i></a>
<!-- ==================== Scroll to Top End Here ==================== -->

<!-- ==================== Header Top Start Here ==================== -->
<div class="header-top">
    <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-between">    
            <div class="top-contact">
                <a href="index.html" class="top-contact__logo">
                    <img src="assets/picture/logo02.png" alt="logo">
                </a>
            </div>      
              <div class="d-flex flex-wrap align-items-center justify-content-center">
                   <div class="d-md-block d-none">
                    <div class="contact-list__wrapper d-flex flex-wrap justify-content-between">
                    <div class="contact-list style-two">
                            <span class="contact-list__icon"> 
                                <img src="assets/picture/phone.png" alt="">
                            </span>
                            <span class="contact-list__info"> 000 - 8888 - 9999</span>
                      </div>
                      <div class="contact-list">
                            <span class="contact-list__icon"> 
                                <img src="assets/picture/email.png" alt="">
                            </span>
                            <span class="contact-list__info"> <a href="javascript:;" class="__cf_email__" data-cfemail="66100f15031416031226010b070f0a4805090b">[email&#160;protected]</a></span>
                    </div>
                    </div>
                   </div>
                   <div class="currency-box">
                    <select class="select">
                        <option selected="">USD</option>
                        <option value="1">EURO</option>
                        <option value="2">RUPI</option>
                        <option value="3">DINAR</option>
                    </select>
                   </div>
              </div>
           
        </div>
    </div>
</div>
<!-- ==================== Header Top End Here ==================== -->
<nav class="category-two">
    <span class="close-sidebar"><i class="las la-times"></i></span>
    <ul class="category-menu-two">
        <li class="category-menu-two__item has-dropdown-two">
            <a href="#" class="category-menu-two__link">
                <span class="category-menu-two__thumb"><img src="assets/picture/dog01.png" alt=""></span> Dog Food <span class="category-menu-two__icon"><i class="las la-angle-down"></i></span></a>
            <ul class="category-dropdown-two">
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/dog01.png" alt="">
                        </span> Category Dropdown One</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/dog01.png" alt="">
                        </span> Category Dropdown Two</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/dog01.png" alt="">
                        </span> Category Dropdown Three</a>
                </li>
            </ul>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/cat.png" alt=""></span> Cat </a>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"> <span class="category-menu-two__thumb"><img src="assets/picture/fish.png" alt=""></span> Fish </a>
        </li>
        <li class="category-menu-two__item">                 
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/toys.png" alt=""></span> Pet toy </a>
        </li>
        <li class="category-menu-two__item has-dropdown-two">
            <a href="#" class="category-menu-two__link">
                <span class="category-menu-two__thumb"><img src="assets/picture/parrot.png" alt=""></span> Parrot Food <span class="category-menu-two__icon"><i class="las la-angle-down"></i></span></a>
            <ul class="category-dropdown-two">
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/parrot.png" alt="">
                        </span> Category Dropdown One</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/parrot.png" alt="">
                        </span> Category Dropdown Two</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/parrot.png" alt="">
                        </span> Category Dropdown Three</a>
                </li>
            </ul>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/rabbit.png" alt=""></span> Rabbit </a>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/accessories.png" alt=""></span> Accessories </a>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/dog02.png" alt=""></span> Small pet </a>
        </li>
     </ul>
     <div class="contact-list__wrapper d-md-none d-block">
        <div class="contact-list">
             <span class="contact-list__icon">
                <img src="assets/picture/phone.png" alt="">
             </span>
             <span class="contact-list__info"> 000 - 8888 - 9999</span>
        </div>
        <div class="contact-list">
             <span class="contact-list__icon">
               <img src="assets/picture/email.png" alt="">
            </span>
             <span class="contact-list__info"> <a href="javascript:;" class="__cf_email__" data-cfemail="7b0d12081e090b1e0f3b1c161a121755181416">[email&#160;protected]</a></span>
        </div>
     </div>
</nav>

<!-- ==================== Bottom Header End Here ==================== -->
<header class="main-header">
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light">
            <button class="navbar-toggler header-button" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span id="hiddenNav"><i class="las la-bars"></i></span>
            </button>
            <div class="header-category-two">
                <button class="header-category-two__item">Categories <span class="header-category-two__icon"><i class="las la-bars"></i></span></button>
               
            </div>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav nav-menu me-auto">
                  <li class="nav-item dropdown">
                      <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Home <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                         <ul class="dropdown-menu">
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="index.html"> Home One </a></li>
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="index-two.html"> Home Two </a></li>
                         </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="about.html">About</a>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Pages <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                      <ul class="dropdown-menu">
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="product-category.html">Product category</a></li>
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="">Product Details</a></li>
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="check-out.html"> Check Out</a></li>
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="faq.html"> Faq </a></li>
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="javascript:;"> Error page </a></li>
                      </ul>
                      </li> 
                        <li class="nav-item dropdown">
                        <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Blog <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="blog.html">Blog</a></li>
                            <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="blog-details.html">Blog Details</a>
                          </li>
                        </ul>
                        </li> 
  
                    <li class="nav-item">
                      <a class="nav-link" href="contact.html">Contact</a>
                  </li>
                    <li class=" nav-item">
                      <div class="toggle-search-box d-none d-lg-block">
                          <button type="button" class="" data-bs-toggle="modal" data-bs-target="#search-box" data-bs-whatever="@mdo"><i class="las la-search"></i></button>
                      </div>
                    </li>
                </ul>
            </div>
            <div class="header-info">
                <div class="toggle-search-box d-lg-none d-block">
                    <button type="button" class="" data-bs-toggle="modal" data-bs-target="#search-box" data-bs-whatever="@mdo"><i class="las la-search"></i></button>
                </div>
              <div class="header-info__wishlist">
                 <a href="wishlist.html" class="header-info__link"><i class="far fa-heart"></i></a>
              </div>
              <div class="header-info__cart">
                     <a href="cart.html" class="header-info__link"><i class="fas fa-shopping-cart"></i></a>
                     <span class="header-info__cart-quantity">03</span>
              </div>
              <div class="header-info__user">
                 <a href="login.html" class="header-info__link"><i class="far fa-user"></i></a>
              </div>
           </div>
        </nav>
    </div>
  </header>
  <!-- ==================== Bottom Header End Here ==================== -->
  
   <!--========================== Search Modal Start ==========================-->
   <div class="overlay-search-box position-relative">
    <div class="modal fade" id="search-box" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="search-overlay-close" data-bs-dismiss="modal" aria-label="Close"><i class="las la-times"></i></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="search-box">
                                    <div class="input--group">
                                        <input type="text" class="form--control style-two" placeholder="Search....">
                                        <button class="search-btn" type="submit"><i class="las la-search"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
  </div>
  <!--========================== Search Modal End ==========================-->

<!-- ==================== Breadcumb Start Here ==================== -->
<section class="breadcumb py-120 bg-img" style="background-image: url(../static/assets/picture/breadcumb-img.png);">
    <div class="container"  th:object="${product}">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="breadcumb__wrapper">
                    <h1 class="breadcumb__title"  th:text="${product.getName()}"> Coco Kat Kitten Milk</h1>
                    <ul class="breadcumb__list">
                        <li class="breadcumb__item"><a href="index.html" class="breadcumb__link"> <i class="las la-home"></i> Home</a> </li>
                        <li class="breadcumb__item"> / </li>
                        <li class="breadcumb__item"> <span class="breadcumb__item-text" th:text="${product.getName()}"> Coco Kat Kitten Milk </span> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ==================== Breadcumb End Here ==================== -->





<!-- ======================product details two section start here ====================-->
<div class="product-details-section py-120">
    <div class="container">
        <div class="row align-items-center gy-4">

            <div class="col-lg-7 pe-lg-5">
              <div class="row align-items-center">

                <div class="col-lg-9 order-lg-2">
                    <div class="product-details__thumb">
                      <a href="" class="product-details__image">
                         <img src="assets/picture/pd-img01.png" alt="">
                      </a>
                      <a href="" class="product-details__image">
                        <img src="assets/picture/product05.png" alt="">
                      </a>
                      <a href="" class="product-details__image">
                        <img src="assets/picture/product04.png" alt="">
                      </a>
                      <a href="" class="product-details__image">
                        <img src="assets/picture/product06.png" alt="">
                      </a>
                    </div>
                </div>

                <div class="col-lg-3 order-lg-1">
                    <ul class="product-details-gallery">
                      <li class="product-details-gallery__image">
                         <img src="assets/picture/pd-img01.png" alt="">
                      </li>
                      <li class="product-details-gallery__image">
                          <img src="assets/picture/product05.png" alt="">
                      </li>
                      <li class="product-details-gallery__image">
                        <img src="assets/picture/product04.png" alt="">
                     </li>
                     <li class="product-details-gallery__image">
                        <img src="assets/picture/product06.png" alt="">
                     </li>

                    </ul>
                </div>

              </div>
            </div>



            <!-- product 商品详情展示模块info -->
<script th:inline="javascript"></script>

            <div class="col-lg-5" >
              <div class="product-info"   th:object="${product}" >
                 <h3 class="product-info__title" th:text="${product.getName()}">
                  Coco Kat Kitten Milk
                 </h3>
                 <ul class="product-info__rating mb-3">
                    <li class="product-info__rating-item">
                      <i class="fas fa-star"></i>
                    </li>
                    <li class="product-info__rating-item">
                      <i class="fas fa-star"></i>
                    </li>
                    <li class="product-info__rating-item">
                      <i class="fas fa-star"></i>
                    </li>
                    <li class="product-info__rating-item">
                      <i class="fas fa-star"></i>
                    </li>
                    <li class="product-info__rating-item">
                      <i class="fas fa-star-half-alt"></i>
                    </li>
                    <li class="product-info__number">
                      4.8
                    </li>
                 </ul>
                 <h6 class="product-info__price">
                     <span class="product-info__price-new"  th:text=" '￥'+${product.getOldprice()}"  >$260</span>
                     <input type="hidden" id="product-price" th:value="${product.getPrice()}">
                     <span class="product-info__price-old"  th:text=" '￥'+${product.getPrice()}" >$260</span>
                 </h6>
                 <p class="product-info__desc"  th:text="${product.getInfo()}">Aliquam ante augue, placerat ut massa id, fermentum facilisis nisi. Nunc mollis augue at mollis posuere. Morbi id lorem</p>
                 <div class="product-style">
                    <span class="product-style__title">Size :</span>
                   <span class="product-style__size">3Kg</span>
                 </div>
                 <div class="product-variation product-style">
                    <span class="product-style__title">Color :</span>
                    <div class="product-color__variant-wrapper">
                        <ul class="color-variant-list">
                          <li class="color-variant-list__item one">
                               <span class="color"></span>
                          </li>
                          <li class="color-variant-list__item two">
                               <span class="color"></span>
                          </li>
                          <li class="color-variant-list__item three">
                               <span class="color"></span>
                          </li>
                          <li class="color-variant-list__item four">
                               <span class="color"></span>
                          </li>
                        </ul>
                    </div>
                 </div>
                 <div class="product-style">
                  <span class="product-style__title">vendor :</span>
                 <span class="product-style__size">Pet Point</span>
                 </div>
                 <div class="product-style">
                  <span class="product-style__title">Type :</span>
                 <span class="product-style__size">Dog Food</span>
                 </div>
                 <div class="qty-cart d-flex product-style">
               <span class="product-style__title">QTY :</span>
                <div class="product-qty">
                     <button type="button" class="product-qty__decrement"><i class="las la-angle-down"></i></button>
                     <input type="number" class="product-qty__value"  id="product-quantity"  value="00">
                     <button type="button" class="product-qty__increment"><i class="las la-angle-up"></i> </button>
                 </div>
                     <input type="hidden" id="product-id" th:value="${product.getId()}">
                 </div>
                 <div class="product-info__button">
                     <a href="javascript:;" id="buy-now-btn" class="btn btn--base pill product-info__link">BUY NOW</a>
                    <a href="wishlist.html" class="product-info__heart product-info__link"><i class="fas fa-heart"></i></a>
                    <a href="cart.html" class="product-info__cart product-info__link"><i class="fas fa-shopping-cart"></i></a>
                 </div>
                 <div class="product-info__share">
                    <h6 class="product-info__share-text">Share :</h6>
                    <ul class="social-list style-four">
                      <li class="social-list__item"><a href="javascript:;" class="social-list__link"><i class="fab fa-facebook-f"></i></a> </li>
                      <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-twitter"></i></a></li>
                      <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-linkedin-in"></i></a></li>
                      <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-pinterest-p"></i></a></li>
                    </ul>
                 </div>

              </div>
            </div>
        </div>
    </div>
</div>

<!-- ======================product details two section end here ====================-->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // 点击“立即购买”按钮
        $('#buy-now-btn').click(function() {
            // 获取商品信息
            const productId = $('#product-id').val();
            const quantity = parseInt($('#product-quantity').val());
            const price = parseFloat($('#product-price').val());

            // 逻辑 1：检查数量是否为 0 或负数
            if (quantity <= 0) {
                alert('购买数量不能为 0 或负数');
                return;
            }

            // 逻辑 2：检查用户是否已登录
            $.ajax({
                url: '/check-login', // 检查登录状态的接口
                type: 'GET',
                success: function(response) {
                    if (response.isLoggedIn) {
                        // 用户已登录，继续购买逻辑
                        const data = {
                            userid: response.userId, // 从后端获取用户 ID
                            items: [{
                                productid: productId,
                                quantity: quantity,
                                price: price
                            }]
                        };

                        // 发送购买请求
                        $.ajax({
                            url: '/checkout', // 后端控制器地址
                            type: 'POST',
                            contentType: 'application/json',
                            data: JSON.stringify(data),
                            success: function(response) {
                                // 跳转到 checkout 页面
                                window.location.href = '/check-out.html';
                            },
                            error: function(xhr, status, error) {
                                console.error('Error:', error);
                                alert('购买失败，请重试。');
                            }
                        });
                    } else {
                        // 用户未登录，跳转到登录页面
                        alert('请先登录');
                        window.location.href = '/login.html'; // 跳转到登录页面
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    alert('检查登录状态时发生错误');
                }
            });
        });
    });
</script>












<!-- =====================tab section start here ========================-->
<div class="tab-section pb-120">
   <div class="container">
    <ul class="nav nav-pills mb-3 custom--tab" id="pills-tab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Description</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Review</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Comment</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-change-tab" data-bs-toggle="pill" data-bs-target="#pills-change" type="button" role="tab" aria-controls="pills-change" aria-selected="false">Faq</button>
      </li>
    </ul>
    <div class="tab-content" id="pills-tabContent">
      <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
        <p class="tab-desc">
          Typography is the work of typesetters, compositors, typographers, graphic designers, art directors, manga artists, comic book artists, graffiti artists, and now—anyone who arranges words, letters, numbers, and symbols for publication, display, or distributionDesign inspiration lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed ritten inhis book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, 
        </p>
      </div>
      <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
        <p class="tab-desc">
          Typography is the work of typesetters, compositors, typographers, graphic designers, art directors, manga artists, comic book artists, graffiti artists, and now—anyone who arranges words, letters, numbers, and symbols for publication, display, or distributionDesign inspiration lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed ritten inhis book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, 
        </p>
      </div>
      <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
        <p class="tab-desc">
          pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper.
        </p>
      </div>
      <div class="tab-pane fade" id="pills-change" role="tabpanel" aria-labelledby="pills-change-tab" tabindex="0">
        <p class="tab-desc">
          pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper.
        </p>
      </div>
    </div>
    
   </div>
</div>

<!-- ==============tab section end here ==============-->






<!-- ==============related product section start here =========-->
<div class="pb-120">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="section-heading style-two">
          <h4 class="section-heading__title style-two">Related Products<span class="section-heading__bars style-two"></span></h4>
       </div>
      </div>
    </div>
    <div class="row gy-4"> 
      <div class="col-lg-3 col-md-6 col-sm-6 col-xsm-6">
        <div class="product-item">
            <div class="product-item__thumb">
                <a href="" class="product-item__thumb-link">
                   <img src="assets/picture/product01.png" alt="">
                </a>
                <button class="product-item__icon">
                    <span class="product-item__icon-style">
                      <i class="las la-heart"></i>
                    </span>
                </button>
                <div class="product-item__badge">
                  <span class="badge badge--base">Sale</span>
                </div>
            </div>
            <div class="product-item__content">
              <h5 class="product-item__title">  
                <a href="" class="product-item__title-link">
                  Coco Kat Kitten Milk   
                </a>
              </h5>
              <ul class="product-info__rating justify-content-center">
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star-half-alt"></i>
                </li>
                <li class="product-info__number">
                  4.8
                </li>
              </ul>
              <h6 class="product-item__price">
                <span class="product-item__price-new">$360</span> $310
              </h6>
               <a href="cart.html" class="btn btn--base pill btn--sm">Add to Cart </a>
            </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-6 col-xsm-6">
        <div class="product-item">
            <div class="product-item__thumb">
                <a href="" class="product-item__thumb-link">
                   <img src="assets/picture/product02.png" alt="">
                </a>
                <button class="product-item__icon">
                    <span class="product-item__icon-style">
                      <i class="las la-heart"></i>
                    </span>
                </button>
            </div>
            <div class="product-item__content">
              <h5 class="product-item__title">  
                <a href="" class="product-item__title-link">
                   Moderna Scoop & Sift  
                </a>
              </h5>
              <ul class="product-info__rating justify-content-center">
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__number">
                  5.0
                </li>
              </ul>
              <h6 class="product-item__price">
                <span class="product-item__price-new">$299</span> $199
              </h6>
               <a href="cart.html" class="btn btn--base pill btn--sm">Add to Cart </a>
            </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-6 col-xsm-6">
        <div class="product-item">
            <div class="product-item__thumb">
                <a href="" class="product-item__thumb-link">
                   <img src="assets/picture/product03.png" alt="">
                </a>
                <button class="product-item__icon">
                    <span class="product-item__icon-style">
                      <i class="las la-heart"></i>
                    </span>
                </button>
                <div class="product-item__badge">
                  <span class="badge badge--base">Sale</span>
               </div>
            </div>
            <div class="product-item__content">
              <h5 class="product-item__title">  
                <a href="" class="product-item__title-link">
                  BonaCibo Kitten Pouch   
                </a>
              </h5>
              <ul class="product-info__rating justify-content-center">
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star-half-alt"></i>
                </li>
                <li class="product-info__number">
                  4.8
                </li>
              </ul>
              <h6 class="product-item__price">
                <span class="product-item__price-new">$360</span> $310
              </h6>
               <a href="cart.html" class="btn btn--base pill btn--sm">Add to Cart </a>
            </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-6 col-xsm-6"> 
        <div class="product-item">
            <div class="product-item__thumb">
                <a href="" class="product-item__thumb-link">
                   <img src="assets/picture/product04.png" alt="">
                </a>
                <button class="product-item__icon">
                    <span class="product-item__icon-style">
                      <i class="las la-heart"></i>
                    </span>
                </button>
            </div>
            <div class="product-item__content">
              <h5 class="product-item__title">  
                <a href="" class="product-item__title-link">
                  Oropharma  
                </a>
              </h5>
              <ul class="product-info__rating justify-content-center">
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__number">
                  5.0
                </li>
              </ul>
              <h6 class="product-item__price">
                <span class="product-item__price-new">$190</span> $170
              </h6>
               <a href="cart.html" class="btn btn--base pill btn--sm">Add to Cart </a>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- ===========related product section start here ===========-->








<!--============related product two section start here ===========-->
<div class="pb-120">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="section-heading style-two">
          <h4 class="section-heading__title style-two"> You may also like <span class="section-heading__bars style-two"></span></h4>
       </div>
      </div>
    </div>
    <div class="row gy-4"> 
      <div class="col-lg-3 col-md-6 col-sm-6 col-xsm-6">
        <div class="product-item">
            <div class="product-item__thumb">
                <a href="" class="product-item__thumb-link">
                   <img src="assets/picture/product05.png" alt="">
                </a>
                <button class="product-item__icon">
                    <span class="product-item__icon-style">
                      <i class="las la-heart"></i>
                    </span>
                </button>
                <div class="product-item__badge">
                  <span class="badge badge--base">Sale</span>
                </div>
            </div>
            <div class="product-item__content">
              <h5 class="product-item__title">  
                <a href="" class="product-item__title-link">
                  Coco Kat Kitten Milk   
                </a>
              </h5>
              <ul class="product-info__rating justify-content-center">
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star-half-alt"></i>
                </li>
                <li class="product-info__number">
                  4.8
                </li>
              </ul>
              <h6 class="product-item__price">
                <span class="product-item__price-new">$360</span> $310
              </h6>
               <a href="cart.html" class="btn btn--base pill btn--sm">Add to Cart </a>
            </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-6 col-xsm-6">
        <div class="product-item">
            <div class="product-item__thumb">
                <a href="" class="product-item__thumb-link">
                   <img src="assets/picture/product06.png" alt="">
                </a>
                <button class="product-item__icon">
                    <span class="product-item__icon-style">
                      <i class="las la-heart"></i>
                    </span>
                </button>
            </div>
            <div class="product-item__content">
              <h5 class="product-item__title">  
                <a href="" class="product-item__title-link">
                  Cat Food Chicke  
                </a>
              </h5>
              <ul class="product-info__rating justify-content-center">
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__number">
                  5.0
                </li>
              </ul>
              <h6 class="product-item__price">
                <span class="product-item__price-new">$360</span> $310
              </h6>
               <a href="cart.html" class="btn btn--base pill btn--sm">Add to Cart </a>
            </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-6 col-xsm-6">
        <div class="product-item">
            <div class="product-item__thumb">
                <a href="" class="product-item__thumb-link">
                   <img src="assets/picture/product01.png" alt="">
                </a>
                <button class="product-item__icon">
                    <span class="product-item__icon-style">
                      <i class="las la-heart"></i>
                    </span>
                </button>
                <div class="product-item__badge">
                  <span class="badge badge--base">Sale</span>
                </div>
            </div>
            <div class="product-item__content">
              <h5 class="product-item__title">  
                <a href="" class="product-item__title-link">
                  Coco Kat Kitten Milk   
                </a>
              </h5>
              <ul class="product-info__rating justify-content-center">
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__number">
                  5.0
                </li>
              </ul>
              <h6 class="product-item__price">
                <span class="product-item__price-new">$360</span> $310
              </h6>
               <a href="cart.html" class="btn btn--base pill btn--sm">Add to Cart </a>
            </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-6 col-xsm-6">
        <div class="product-item">
            <div class="product-item__thumb">
                <a href="" class="product-item__thumb-link">
                   <img src="assets/picture/product08.png" alt="">
                </a>
                <button class="product-item__icon">
                    <span class="product-item__icon-style">
                      <i class="las la-heart"></i>
                    </span>
                </button>
            </div>
            <div class="product-item__content">
              <h5 class="product-item__title">  
                <a href="" class="product-item__title-link">
                  Moderna Trendy Story   
                </a>
              </h5>
              <ul class="product-info__rating justify-content-center">
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                  <i class="fas fa-star"></i>
                </li>
                <li class="product-info__number">
                  5.0
                </li>
              </ul>
              <h6 class="product-item__price">
                <span class="product-item__price-new">$360</span> $310
              </h6>
               <a href="cart.html" class="btn btn--base pill btn--sm">Add to Cart </a>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>


<!-- ===============related section two end here ===================-->





<!--============================feature section start here =======================-->
<div class="feature-section bg-img py-60" style="background-image: url(../static/assets/picture/feature-img.png);">
    <div class="container">
        <div class="row gy-4">
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f04.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            FREE SHIPPING
                        </h5>
                        <span class="feature-item__payment"> For All Order Over $99 </span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f03.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            FRIENDLY SUPPORT
                        </h5>
                        <span class="feature-item__payment"> 24/7 Customer Support </span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f02.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            SECURE PAYMENT
                        </h5>
                        <span class="feature-item__payment">100%  Secure Payment</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f01.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            SHIPPING & RETURN
                        </h5>
                        <span class="feature-item__payment"> within 30days For Refund </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- ==========================feature setion end here ============================-->



<!-- ========footer===== -->

<!-- ==================== Footer Start Here ==================== -->
<footer class="footer-area section-bg-light bg-img">
    <div class="pb-60 pt-120">
        <div class="container">
            <div class="row justify-content-center gy-5">
                <div class="col-xl-3 col-sm-6">
                    <div class="footer-item">
                        <div class="footer-item__logo">
                            <a href="index.html"> <img src="assets/picture/footer-logo02.png" alt=""></a>
                        </div>
                        <p class="footer-item__desc"> Maecenas tempus tellus eget cdimentum rhoncus sem quam semper </p>
                        <ul class="social-list">
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"><i class="fab fa-facebook-f"></i></a> </li>
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-twitter"></i></a></li>
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-linkedin-in"></i></a></li>
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-pinterest-p"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-1 d-xl-block d-none"></div>
                <div class="col-xl-2 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title"> Pages </h5>
                        <ul class="footer-menu">
                            <li class="footer-menu__item"><a href="about.html" class="footer-menu__link"> About Us</a></li>
                            <li class="footer-menu__item"><a href="faq.html" class="footer-menu__link"> Faq</a></li>
                            <li class="footer-menu__item"><a href="cart.html" class="footer-menu__link">Shopping Cart </a></li>
                            <li class="footer-menu__item"><a href="blog.html" class="footer-menu__link"> Blog</a></li>
                            <li class="footer-menu__item"><a href="" class="footer-menu__link"> Product Details</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-2 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title"> Useful link </h5>
                        <ul class="footer-menu">
                            <li class="footer-menu__item"><a href="product-category.html" class="footer-menu__link"> Product Category </a></li>
                            <li class="footer-menu__item"><a href="check-out.html" class="footer-menu__link">Checkout </a></li>
                            <li class="footer-menu__item"><a href="login.html" class="footer-menu__link">Login </a></li>
                            <li class="footer-menu__item"><a href="registration.html" class="footer-menu__link"> Registration </a></li>
                            <li class="footer-menu__item"><a href="contact.html" class="footer-menu__link"> Contact Us </a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-1 d-xl-block d-none"></div>
                <div class="col-xl-3 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title">Subscribe now</h5>
                        <div class="subscriber-form mb-3">
                            <input type="text" class=" form--control style-two" placeholder="Email Address" aria-label="Recipient's username">
                            <button class="btn btn--base subscribe-button"><i class="fas fa-paper-plane"></i></button>
                          </div>
                          <p>Subscribe to our newsletter and get 10% off your first purchase..</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
  <!-- Footer Top End-->
  
    <!-- bottom Footer -->
    <div class="bottom-footer section-bg py-3">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="bottom-footer__text">  Copyright &copy; 2023 . All rights reserved by Viserpet.</div>
                </div>
            </div>
        </div>
    </div>
  </footer>
  <!-- ==================== Footer End Here ==================== -->
  

<!-- Jquery js -->
<script data-cfasync="false" src="assets/js/email-decode.min.js"></script><script src="assets/js/jquery-3.6.1.min.js"></script>
<!-- Popper js -->
<script src="assets/js/popper.min.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Slick js -->
<script src="assets/js/slick.min.js"></script>
<!-- countdown js -->
<script src="assets/js/jquery.knob.js"></script>
<script src="assets/js/jquery.throttle.js"></script>
<script src="assets/js/jquery.classycountdown.min.js"></script>
<!-- range js -->
<script src="assets/js/jquery-ui.js"></script>
<!-- magnific popup js -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
 <!-- main js -->
 <script src="assets/js/main.js"></script>

</body>
</html>
